<template>
  <div class="appJbxxInfo">
    <el-dialog :title="dialogAppJbxx.title" v-model="obj.visible" @update:model-value="dialogAppJbxxChange"
      :style="{ right: '20px', top: '50%', transform: 'translateY(-50%)', position: 'fixed', margin: '0' }"
      width="800px">
      <el-form ref="miniProgramBaseInfoFormRef" :model="form" :rules="rules" label-width="110px">
        <el-row :gutter="24" class="mb8">
          <el-col :span="18">
            <el-form-item label="小程序名称" prop="name">
              <el-input v-model="form.nickName" placeholder="请输入小程序名称" :disabled="disabled" />
              <el-button :loading="nameLoading" type="primary" @click="setNickName">修改</el-button>

              <span style="font-size: 10px;">4-30个字符，1个中文字为2个字符。</span>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="小程序头像" prop="logo">
              <image-upload v-model="form.headImageUrl" :isShowTip="false" :limit="1" :disabled="disabled" />
              <span style="font-size: 10px;">头像不允许涉及政治敏感与色情;支持格式为png、bmp、jpeg、jpg、gif，大小不超过2M；</span>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="搜索状态" prop="searchStatus">
              <el-radio-group v-model="form.searchStatus">
                <el-radio :value="1">可搜索</el-radio>
                <el-radio :value="0">不可搜索</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小程序介绍" prop="blurb">
              <el-input v-model="form.blurb" type="textarea" placeholder="请输入小程序介绍" :disabled="disabled" />
              <el-button :loading="blurbLoading" type="primary" @click="setSignature">修改</el-button>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AppZcInfo" lang="ts">
import { listMiniProgramBaseInfo, getMiniProgramBaseInfo, delMiniProgramBaseInfo, addMiniProgramBaseInfo, updateMiniProgramBaseInfo, updateNickName, updateSignature } from '@/api/platform/miniProgramBaseInfo';
import { MiniProgramBaseInfoVO, MiniProgramBaseInfoQuery, MiniProgramBaseInfoForm } from '@/api/platform/miniProgramBaseInfo/types';
import { vi } from 'element-plus/es/locale/index.mjs';
const obj = defineProps({
  id: {
    type: Number,
    default: undefined
  },
  visible: {
    type: Boolean,
    default: false
  }
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const miniProgramBaseInfoFormRef = ref<ElFormInstance>();
const disabled = ref(false);
const buttonLoading = ref(false);
const nameLoading = ref(false);
const blurbLoading = ref(false);


const dialogAppJbxx = reactive<DialogOption>({
  visible: false,
  title: '小程序基本信息'
});

const initFormData: MiniProgramBaseInfoForm = {
  id: undefined,
  nickName: undefined,
  shortName: undefined,
  headImageUrl: undefined,
  blurb: undefined,
  searchStatus: undefined
}
const data = reactive<PageData<MiniProgramBaseInfoForm, MiniProgramBaseInfoQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    id: undefined,
    nickName: undefined,
    shortName: undefined,
    headImageUrl: undefined,
    blurb: undefined,
    searchStatus: undefined,
    params: {
    }
  },
  rules: {
    nickName: [
      { required: true, message: "小程序名称不能为空", trigger: "blur" }
    ],
    headImageUrl: [
      { required: true, message: "请上传小程序头像", trigger: "change" }
    ],
    blurb: [
      { required: true, message: "小程序介绍不能为空", trigger: "blur" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

const emit = defineEmits(['update:visible']);
const dialogAppJbxxChange = (val: boolean) => {
  emit('update:visible', val);
}
/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  miniProgramBaseInfoFormRef.value?.resetFields();
}

/** 详情按钮操作 */
const getInfo = async () => {
  let _id = obj.id;
  if (_id != undefined) {
    const res = await getMiniProgramBaseInfo(_id);
    form.value = res.data;
    console.log("6666666666", form.value)
    dialogAppJbxx.visible = true;
    dialogAppJbxx.title = '小程序基本信息修改'
  } else {
    dialogAppJbxx.visible = true;
  }
}


/** 取消按钮 */
const cancel = () => {
  reset();
  dialogAppJbxxChange(false)
}

/** 提交按钮 */
const submitForm = () => {
  miniProgramBaseInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateMiniProgramBaseInfo(form.value).finally(() => buttonLoading.value = false);
      } else {
        await addMiniProgramBaseInfo(form.value).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialogAppJbxx.visible = false;
    }
  });
}
/** 修改小程序名称 */
const setNickName = () => {
  miniProgramBaseInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      nameLoading.value = true;
      await updateNickName(form.value).finally(() => nameLoading.value = false);
      proxy?.$modal.msgSuccess("操作成功");
      dialogAppJbxx.visible = false;
    }
  });
}

/** 修改小程序介绍 */
const setSignature = () => {
  miniProgramBaseInfoFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      blurbLoading.value = true;
      await updateSignature(form.value).finally(() => blurbLoading.value = false);
      proxy?.$modal.msgSuccess("操作成功");
      dialogAppJbxx.visible = false;
    }
  });
}

onMounted(() => {
  getInfo();
});
</script>
<style lang="scss">
.box-card {
  background: #fff;
}

.spanCla {
  margin-bottom: 15px;
}

.card-header {
  display: flex;
  align-items: center;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 120px;
  /* 默认显示两行高度 */
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}

.tag-container::-webkit-scrollbar {
  width: 4px;
}

.tag-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.tag-item {
  transition: transform 0.2s ease;
}

.tag-item:hover {
  transform: translateY(-1px);
}

.el-check-tag {
  display: inline-flex;
  /* 改为内联弹性布局 */
  width: auto !important;
  /* 移除固定宽度限制 */
  box-sizing: border-box;
  margin: 0;
  white-space: nowrap;
  overflow: visible;
  /* 允许内容溢出 */
  text-overflow: clip;
  /* 移除省略号 */
  padding: 0 12px;
  /* 增加左右内边距 */
  height: 28px;
  line-height: 26px;
  border: 1px solid #dcdfe6;
  background-color: #f5f7fa;
  color: #606266;
  cursor: default;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.el-check-tag.is-checked {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
}
</style>
